<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>积分兑换商城首页触屏版html5</title>
    <link rel="stylesheet" type="text/css" href="css/detail/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/detail/detail.css"/>
    <link rel="stylesheet" type="text/css" href="css/detail/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/detail/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/detail/loading.css"/>
    <link rel="stylesheet" href="css/detail/swiper.min.css">
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/css/detail/rem.js"></script>
    <script src="css/detail/jquery.min.js" type="text/javascript"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="css/detail/others.js"></script>
    <script src="css/detail/swiper.jquery.min.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script type="text/javascript">
        $(window).load(function () {
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300)
        })
        function toshare() {
            $(".am-share").addClass("am-modal-active");
            if ($(".sharebg").length > 0) {
                $(".sharebg").addClass("sharebg-active");
            } else {
                $("body").append('<div class="sharebg"></div>');
                $(".sharebg").addClass("sharebg-active");
            }
            $(".sharebg-active,.share_btn").click(function () {
                $(".am-share").removeClass("am-modal-active");
                setTimeout(function () {
                    $(".sharebg-active").removeClass("sharebg-active");
                    $(".sharebg").remove();
                }, 300);
            })
        }
    </script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>


<!--商品详情页面-->
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar-nav" style="background-color: #3E3C3B" id="header">
    <a class="btn" href="javascript:history.go(-1)">
        <i class="iconfont icon-fanhui"></i>
    </a>
    <h4>酒店详情</h4>
</header>
<!--header end-->
<script>
    $(function (){
        var hotelId = getParams().hotelId;
        console.log(hotelId);
        $.get("/hotel/"+hotelId,function (data) {
            $(".product").renderValues(data);
            $(".car").renderValues(data);
        })

        var user = JSON.parse(sessionStorage.getItem("user"));
        if (user==null){
            $("#affirm").click(function () {
                $(document).dialog({
                    type: "notice",
                    infoText: "亲,登录了才可以预定哦",
                    autoClose: 1500,
                    position: "center"
                });
            })
        } else {
            $("#affirm").click(function () {
                $(document).dialog({
                    type: "notice",
                    infoText: "预定成功,请带上女朋友",
                    autoClose: 1500,
                    position: "center"
                });
            })
        }
    });


</script>


<div class="warp warptwo clearfloat product">
    <div class="detail clearfloat">
        <!--banner star-->
        <div class="banner swiper-container">

            <!--头像-->
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data
                                                                            render-src="printUrl" alt=""></a></div>
                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data
                                                                            src="/upload/faad74b7-6ef1-4642-bed5-23ec0afa0b8c.png" alt=""></a></div>
                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data
                                                                            src="/upload/d392e47e-a5ac-4dac-80a4-fef23f481f57.png" alt=""></a></div>
                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data
                                                                            src="/upload/5160d609-848a-4e44-ad5c-57d3680832c8.png" alt=""></a></div>
            </div>




            <div class="swiper-pagination"></div>
        </div>
        <!--banner end-->
        <div class="top clearfloat box-s">
            <div class="shang clearfloat">
                <div class="zuo clearfloat fl over2 box-s" render-html="name">
                </div>
                <div class="you clearfloat fr">
                    <i class="iconfont "></i>
                    <p>分享</p>
                </div>
            </div>
            <div class="xia clearfloat">
                <p class="jifen fl box-s">¥<samp render-html="price"></samp> 起</p>
            </div>
        </div>
        <div class="middle clearfloat box-s">
            <a href="#">
                <span class="fl">详细地址</span>
                <i class="iconfont  fr" render-html="address"></i>
            </a>
        </div>
        <div class="middle clearfloat box-s">
            <a href="#">
                <span class="fl">评价</span>
                <i class="iconfont  fr"></i>
            </a>
        </div>
    </div>
</div>

<!--footerone star-->
<div class="footerone clearfloat ">
    <div class="left clearfloat fl">
        <ul>
            <li style="display: flex;justify-content: center; align-items: center;padding-top: 0;">
                <div>
                    <a href="#">
                        <i class="iconfont icon-shangcheng"></i>
                        <p> </p>
                    </a>
                </div>
            </li>
            <li style="display: flex;justify-content: center; align-items: center;padding-top: 0;">
                <div>
                    <a href="#">
                        <i class="iconfont "></i>
                        <p>客服</p>
                    </a>
                </div>
            </li>
        </ul>
    </div>
    <div class="right clearfloat fl">
        <span class="btn fl" onClick="toshare()">立即预定</span>

        <a class="btn btnone fl"></a>
    </div>
</div>
<!--footerone end-->

<!--弹出购物车内容-->
<div class="am-share car">
    <div class="am-share-footer">
        <button class="share_btn"><img src="/images/chahao.png"/></button>
    </div>
    <div class="am-share-sns box-s">
        <div class="sdetail clearfloat">
            <div class="top clearfloat">
                <div class="tu clearfloat fl">
                    <span></span>
                    <img render-src="printUrl"/>
                </div>
                <div class="you clearfloat fl">
                    <p class="tit" render-html="productName"></p>
                    <p><samp render-html="price"></samp>优惠价</p>
                </div>
            </div>
            <div class="bottom ">
                <p class="fl">入住人数</p>
                <div class="you clearfloat fr">
                    <ul>
                        <li id="down" onclick="document.getElementById('count').innerHTML--"><img src="/images/jian.jpg"/></li>
                        <li id="count">1</li>
                        <li onclick="document.getElementById('count').innerHTML++"><img src="/images/jia.jpg"/></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <button class="shop-btn db" id="affirm">确定</button>
</div>

<!--footer end-->
</body>

</html>